<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      :disabled="false"
      :show-question-icon="false"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 展示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.showField')}}</h4>
      <div class="form-item-box">
        <div class="form-setting-item">
          <el-select
            v-model="providerRelatedFields"
            value-key="fieldName"
            multiple
            :multiple-limit="max"
          >
            <el-option
              v-for="item in serviceProviderFields"
              :key="item.fieldName"
              :label="item.displayName"
              :value="item"
              :disabled="checkFieldDisabledHandler(item)"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 展示字段 -->

  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';

import { findComponentUpward } from '@src/util/assist';
import * as FormUtil from '@src/component/form/util'

/* props */
import { settingProps } from '@src/component/form/components/props';
import i18n from '@src/locales'

export default {
  name: 'form-service-provider-setting',
  mixins: [SettingMixin, FormSubFormMixin],
  props: settingProps,
  computed: {
    /** 服务商关联系统字段 */
    providerRelatedFields: {
      get() {
        return this.subformFields
      },
      set(value) {
        this.update(value, 'subFormFieldList');
      }
    },
    serviceProviderFields() {
      let { serviceProviderFields = [] } = findComponentUpward(this, 'form-design') || {};

      let fields = serviceProviderFields.map(field => {
        return {
          ...field,
          id: null, // 去掉原字段id，由后端生成
          formType: 'relateServiceProvider', // 用统一的类型
          setting: {
            ...(field.setting || {}),
            originalFormType: field.formType // 存储原本的类型
          }
        };
      });

      return FormUtil.toFormField(fields);
    }
  },
  methods: {
    initServiceProviderFields() {
      // 无值时设置默认值
      if (!this.providerRelatedFields.length) {
        let fields = this.serviceProviderFields.filter(field =>
          this.checkFieldDisabledHandler(field)
        )
        return fields
      }

      let providerRelatedFields = this.providerRelatedFields.filter(item => {
        return this.serviceProviderFields.find(field => item.fieldName === field.fieldName)
      })

      // 已删除的关联显示字段
      let removeFields = this.providerRelatedFields.filter(field =>
        this.serviceProviderFields.every(option => option.fieldName != field.fieldName)
      )
      
      // 存在已删除的关联显示字段则提示
      if (removeFields.length) this.showNotification(removeFields)

      return providerRelatedFields
    },
    showNotification(arr = []) {
      this.$notify({
        type: 'warning',
        title: this.$t('common.form.preview.subServiceProvider.title1'),
        duration: 0,
        message: (function(h) {
          let fieldNodes = arr.map((item, index) => {
            return (
              <strong>
                {item.displayName}
                {arr.length - 1 != index && '、'}
              </strong>
            );
          });

          return (
            <div class="form-design-notification">
              <p>{i18n.t('common.form.preview.subServiceProvider.des1')}</p>
              <div class="form-design-notification-content">{fieldNodes}</div>
            </div>
          );
        })(this.$createElement)
      });
    },
    /* 检查字段是否禁止取消 */
    checkFieldDisabledHandler(field) {
      // 服务商名称必选 禁止编辑
      const fieldNameArr = ['providerName']
      let fieldName = field.fieldName

      return fieldNameArr.includes(fieldName);
    },
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    }
  },
  mounted() {
    this.providerRelatedFields = this.initServiceProviderFields()
  }
}
</script>
<style lang="scss" scoped>
@import '@src/component/form/components/FormSubForm/FormSubForm.scss';
</style>
